<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>APP</title>
    <link rel="stylesheet" type="text/css" href="css/aui.css"/>
</head>
<style type="text/css">
    .aui-content {
        background: #ffffff;
        overflow: hidden;
        padding: 15px;
    }

    p {
        margin: 10px 0;
        overflow: hidden;
    }

</style>
<body>
<div class="aui-searchbar-wrap demo" id="search">
    <div class="aui-searchbar aui-border-radius"  onclick="doSearch()">
        <i class="aui-iconfont aui-icon-search"></i>

        <div class="aui-searchbar-text">请输入搜索内容</div>
        <div class="aui-searchbar-input">
            <input type="text" placeholder="请输入搜索内容" autocapitalize="off">
        </div>
    </div>
    <div class="aui-searchbar-cancel aui-text-info"  onclick="cancelSearch()">取消</div>
</div>
<div class="aui-content">
    <p>带有提示的滑块：<span id="value-1">30</span></p>

    <div class="aui-range" style="margin-top:30px;">
        <input type="range" class="aui-range-danger" value="30" max="100" min="0" step="1" id="range"/>
    </div>
</div>
</body>
<script type="text/javascript" src="script/jquery-1.10.2.js"></script>
<script type="text/javascript" src="script/plugin.js"></script>
<script type="text/javascript">
    $.range.range($("#range")[0], function (data) {
        $('#value-1').text(data);
    })

    function doSearch(){
        $('.aui-searchbar-wrap').addClass('focus');
        $('.aui-searchbar-input input').focus();
    }
    function cancelSearch(){
        $('.aui-searchbar-cancel').click(function(){
            $('.aui-searchbar-wrap.focus').removeClass('focus');
        })
    }
</script>
</html>